<template>
  <DeskTopHeader v-if="!isMobile"></DeskTopHeader>
  <MoblieHeader v-else></MoblieHeader>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import DeskTopHeader from './DeskTop/index.vue'
import MoblieHeader from './Mobile/index.vue'
const screenWidth = ref(window.innerWidth)

const isMobile = computed(() => screenWidth.value < 768)

const updateScreenWidth = () => {
  screenWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', updateScreenWidth)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateScreenWidth)
})
</script>

<style lang="scss" scoped></style>
